<template>
    <div>
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>请发表对Vue的评论</h1>
                    </div>
                </div>
            </div>
        </header>
        <div class="container">
            <Add :addComment="addComment"/>
            <List :comments="comments" :delComment="delComment"/>
        </div>
    </div>
</template>

<script>
    /*数据在哪个组件,更新数据的行为(方法)就应该在定义在哪个组件*/
    import Add from './components/Add'
    import List from './components/List'
    export default {
        name: "App",
        data(){
            return {
                comments:[
                    {name:'tom',content:'Vue真不错'},
                    {name:'jack',content:'Vue强大'},
                    {name:'rose',content:'真爽Vue'},
                ]
            }
        },
        methods:{
            /*添加评论*/
          addComment(comment){
              this.comments.unshift(comment)
          },
            /*删除指定下标的评论*/
            delComment(index){
              this.comments.splice(index,1)
          }
        },
        components:{
            Add,
            List
        }
    }
</script>

<style scoped>

</style>